import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
function useAddCount(num = 100, step = 10, timer = 1000) {
  let [count, setCount] = useState(num)
  function add() {
    setTimeout(() => {
      setCount((v) => {
        return v + step
      })
    }, timer);
  }
  useEffect(() => {
    console.log("count更新成了" + count)
  })
  return [count, add]
}
/* 
  规则 就是use开头函数，这些函数里边可以调用其他hook
  使用自定义hook一般是为了共用逻辑的抽离
*/
function App() {
  let [count, add] = useAddCount(100, 20, 3000)
  let [count2, add2] = useAddCount(0, 1, 10)
  return <>
    <h1>hello{count}</h1>
    <button onClick={add}>+</button>
    <h2>-----------------</h2>

    <h1>hello{count2}</h1>
    <button onClick={add2}>+</button>
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))